<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选反选取消</title>
    <style>
        .selected{
            background-color: #528bcb;
            color: #ffffff;
            border-bottom: 1px solid #fff;
        }
    </style>
    <script>
        window.onload=function(){
            // 模拟JQuery
            function $(select){
                return document.querySelectorAll(select)
            }
            /*
                @params isSelected boolean 是否选中
                @params cName string 类名

            */
            function all(isSelected,cName){
                $('input').forEach((item,index)=>{
                    item.checked=isSelected
                })
                $('li').forEach((item,index)=>{
                    item.className=cName
                })
            }
            // var btns = document.querySelectorAll('button')
            // var inputs = document.querySelectorAll('input')
            // var lis = document.querySelectorAll('li')

            // var btns = $('btn')
            // var inputs = $('input')
            // var lis = $('li')
            // 全选
            // btns[0].onclick=function(){
            //     inputs.forEach((item,index)=>{
            //         item.checked=true
            //     })
            //     lis.forEach((item,index)=>{
            //         item.className="selected"
            //     })
            // }
            $('button')[0].onclick=function(){
                all(true,'selected')
            }
            // 反选
            $('button')[1].onclick=function(){
                $('input').forEach((item,index)=>{
                //    if(item.checked){
                //        item.checked=false
                //    }else{
                //        item.checked=true
                //    }
                    item.checked?item.checked=false:item.checked=true
                })
              
            }
            // 取消
            $('button')[2].onclick=function(){
                all(false,'')
            }
        }
    </script>
</head>
<body>
    <button>全选</button>
    <button>反选</button>
    <button>取消</button>

    <ul>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
        <li><input type="checkbox">coding</li>
    </ul>
</body>
</html>